<template>
  <div class="comment">
    <ArticleTitle class="comment_title">
      <template v-slot:title>评论区</template>
      <template v-slot:icon>
        <svg class="icon pinglun" aria-hidden="true">
          <use xlink:href="#icon-pinglun"></use>
        </svg>
      </template>
    </ArticleTitle>
    <Textarea @onAddComment="onAddComment" ref="commentTextareaRef" />
    <CommentList
      v-if="props.comments.length !== 0"
      :commentList="props.comments"
      @onAddReply="replyCommentHandle"
    />
  </div>
</template>

<script setup>
  import { ref } from 'vue'
  import ArticleTitle from '@/components/ArticleTitle.vue'
  import Textarea from './Textarea.vue'
  import CommentList from './CommentList.vue'
  const props = defineProps({
    comments: {
      type: Array,
      default: () => [],
    },
  })
  const commentTextareaRef = ref(null)
  const emit = defineEmits(['onComment', 'onReply'])
  const onAddComment = comment => {
    emit('onComment', comment)
  }
  const replyCommentHandle = (reply, id) => {
    emit('onReply', reply, id)
  }
  const reset = () => {
    commentTextareaRef.value.reset()
  }
  defineExpose({ reset })
</script>

<style lang="less" scoped>
  .comment {
    width: 100%;
    padding: 32px 56px 32px 42px;
    margin-top: 20px;
    background: var(--background-secondary);
    border-radius: 16px;
    .comment_title {
      margin: 12px 0;
      font-size: 16px;
      margin: 0;
      margin-bottom: 25px;
    }
  }

  @media only screen and (max-width: 990px) {
    .comment {
      padding: 12px;
    }
  }
</style>
